<template>
	<view>
		<!-- 返回键 | 返回上一级 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<view>
					<image
					src="@/static/image/common/back.png"
					style="width: 18rpx; height: 31rpx"
					@click="changeStep"
					></image>
				</view>
				<view></view>
			</view>
		</view>
		
		<!-- 导航显示内容 -->
		<view>
			<first v-if="active === 1" :parentObj="parentObj" @change="nextAction"></first>
			<second v-else-if="active === 2" :parentObj="parentObj" @change="nextAction"></second>
			<third v-else-if="active === 3" :parentObj="parentObj" @change="nextAction"></third>
			<fouth v-else-if="active === 4" :parentObj="parentObj" @change="nextAction"></fouth>
		</view>
	</view>
</template>

<script>
	import { userUpdateInfo } from '@/api/personal.js'
	import first from '@/pages/first/loginGuide/first/first.vue'
	import second from '@/pages/first/loginGuide/second/second.vue'
	import third from '@/pages/first/loginGuide/third/third.vue'
	import fouth from '@/pages/first/loginGuide/fouth/fouth.vue'
	
	export default {
		// 装载步骤
		components: { first, second, third, fouth },
		data() {
			return {
				// 步骤
				active: 1,
				// 聚合数据
				parentObj: {}
			}
		},
		onLoad({ active }) {
			this.active = parseInt(active || 1)
			let { nick, sex, birthday, avatar } = this.userInfo
			this.parentObj = { nick, sex, birthday, avatar }
		},
		methods: {
			// 返回上一级
			changeStep() {
				if (this.active > 1) {
					this.active--
				} else {
					this.jumpBack()
				}
			},
			nextAction(obj = {}) {
				this.parentObj = { ...this.parentObj, ...obj }
				// 对数据进行保存
				userUpdateInfo(obj).then((userInfo) => {
					this.$store.commit('UPDATE_USER_INFO', { ...this.userInfo, ...obj})
					if (!obj.avatar) {
						this.active++
					} else {
						// 请求接口根据用户类型进行判断路由显示
						setTimeout(() => {
							this.$store.dispatch('initUserData')
							this.$store.commit('UPDATE_TABBAR_VISIBLE_TYPE', 'user')
						}, 100)
						// // 请求接口保存信息并进入首页
						uni.switchTab({
							url: '/pages/tabbar/user/index/index'
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.header {
		&-navbar {
			position: relative;
			padding: 0 38rpx;
			height: 98rpx
		}
	}
	
	.form-item {
		padding-bottom: 16rpx;
		border-bottom: 4rpx solid rgba(179, 185, 197, .2);
	}
</style>
